<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let router = useRouter()
let bookData =ref(null)
let formDate =ref({
  name:'',
  type:''
})
axios.get("http://localhost:8080/api/books",{
  headers:{
    "Authorization":"Bearer"+ localStorage.getItem("token")
  }
   
}).then((res)=>{
    bookData.value=res.data

})
function handleDetailClick(data:any){
  router.push({
    name:"details",
    query:{
      id:data.row.id,
    }
  })
}

function sunmit(){
  console.log
  axios.get("http://localhost:8080/api/books",{params:formDate.value}).then((res)=>{
    bookData.value=res.data
  })
}
</script>

<template>
<h1>书籍管理系统</h1>

<form action="" >
    书名:<input type="text" v-model="formDate.name">
    类型:<input type="text" v-model="formDate.type">
    <el-button link type="primary" size="small" style="margin-left:10px;" @click="sunmit">搜索</el-button>
</form>

<el-table :data="bookData" style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="name" label="书名" width="180" />
    <el-table-column prop="type" label="类型" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="data">
        <el-button link type="primary" size="small" @click="handleDetailClick(data)">
          详情
        </el-button>
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<style scoped>

</style>